<template>
	<div class="my-reservation-add maxW">
		<div class="crumbs-link my-reservation-add-link">
			<em @click="goback()">我的预约</em>
			<strong><i>></i>{{ruleForm.name}}</strong>
		</div>
		<div class="my-reservation-add-cont">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px">
				<el-form-item label="直播时间" class="reservation-time">
					<el-form-item label-width="0" prop="date1">
						<el-date-picker readonly v-model="ruleForm.date" type="date" value-format="yyyy-MM-dd" placeholder="直播时间" style="width: 100%" disabled="disabled">
						</el-date-picker>
					</el-form-item>
					<el-form-item label-width="0" class="Livesection">
						<el-col :span="11">
							<el-form-item prop="startTime">
								<el-time-select readonly placeholder="起始时间" v-model="ruleForm.start_time" value-format="HH-mm" disabled="disabled">
								</el-time-select>
							</el-form-item>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-form-item prop="startTime">
								<el-time-select readonly placeholder="结束时间" v-model="ruleForm.end_time" disabled="disabled">
								</el-time-select>
							</el-form-item>
						</el-col>
					</el-form-item>
				</el-form-item>
				<el-form-item label="公开课名称" class="input-gab">
					<el-input v-model="ruleForm.name" disabled="disabled"></el-input>
				</el-form-item>
				<el-form-item label-width="0" class="input-css">
					<el-form-item label='授课教师'>
						<el-input v-model="ruleForm.teacher" disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label='直播设备'>
						<el-input v-model="ruleForm.equipment" disabled="disabled"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item label-width="0" class="input-css">
					<el-form-item label='所属学校'>
						<el-input v-model="ruleForm.school" disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label='学段'>
						<el-input v-model="ruleForm.study_id" disabled="disabled"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item label-width="0" class="input-css">
					<el-form-item label='年级'>
						<el-input v-model="ruleForm.grade_id" disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label='科目'>
						<el-input v-model="ruleForm.section_id" disabled="disabled"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item label-width="0" class="input-css">
					<el-form-item prop="lesson_type" label='课型'>
						<el-input v-model="lesson_type[ruleForm.lesson_type-1]" disabled="disabled"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item label='课程简介' class="input-txt">
					<el-input type="textarea" :rows="5" resize="none" v-model="ruleForm.synopsis" disabled="disabled">
					</el-input>
				</el-form-item>
				<el-form-item label='是否录制' class="input-txt">
					<el-radio-group v-model="ruleForm.is_recording">
						<el-radio :label="1">录制</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div class="reservation-state">
				<!-- 通过 -->
				<template v-if="status === 1">
					<div class="reservation-state-c clear">
						<span>审核结果：</span>
						<div>
							<i class="fs state1"></i>
						</div>
					</div>
					<div class="reservation-state-c clear">
						<span>审批时间：</span>
						<div>
							<span v-text="auth_time"></span>
						</div>
					</div>
				</template>
				<!-- 未审核 -->
				<template v-if="status === 2">
					<div class="reservation-state-c clear">
						<span>审核结果：</span>
						<div v-if="char">
							<i class="fs state2"></i>
						</div>
						<div v-else>
							<i class="fs state4"></i>
						</div>
					</div>
				</template>
				<!-- 拒绝 -->
				<template v-if="status === 3">
					<div class="reservation-state-c clear">
						<span>审核结果：</span>
						<div>
							<i class="fs state3"></i>
						</div>
					</div>
					<div class="reservation-state-c clear">
						<span>拒绝理由：</span>
						<div>
							<span v-text="comment"></span>
						</div>
					</div>
					<div class="reservation-state-c clear">
						<span>审批时间：</span>
						<div>
							<span v-text="auth_time"></span>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        liveTime: 1,
        date: "",
        start_time: "",
        end_time: "",
        name: "",
        teacher: "",
        equipment: "",
        school: "",
        study_id: "",
        grade_id: "",
        section_id: "",
        lesson_type: "",
        synopsis: "", //课程简介
        imgurl: "",
        is_recording: ""
      },
      status: 2, //未审核状态
      auth_time: "", //审批时间
      comment: "", //拒绝理由
      char: true,
     lesson_type: ["新授课", "复习课", "评讲课", "主题活动课"],
    };
  },
  created() {
    this.getAlbum();
  },
  methods: {
    getAlbum() {
      let success = data => {
        this.ruleForm = data.data;
        this.ruleForm.id = data.data.id;
        this.ruleForm.liveTime = data.data.order_type;
        this.ruleForm.date = data.data.start_time;
        this.ruleForm.start_time = data.data.start_time.substring(11, 16);
        this.ruleForm.end_time = data.data.end_time.substring(11, 16);
        this.ruleForm.name = data.data.name;
        this.ruleForm.teacher = data.data.create_name;
        this.ruleForm.school = data.data.school_name;
        this.ruleForm.lesson_type = data.data.teaching_type;
        this.ruleForm.study_id = data.data.study_section_name;
        this.ruleForm.grade_id = data.data.grade_name;
        this.ruleForm.section_id = data.data.subject_name;
        this.ruleForm.synopsis = data.data.profile;
        this.ruleForm.equipment = data.data.recorder_name;
        this.ruleForm.is_recording = data.data.is_record;
        this.status =  data.data.status;
        this.auth_time = data.data.auth_time;
        this.comment = data.data.comment;
        new Date(this.ruleForm.date).getTime() > new Date().getTime()//审核是否过期
          ? this.char = true
					: this.char = false;
      };
      this.$ajax.get("api/teachingschedule/schedule_info", {
        params: { id: this.$route.query.id },
        func: { success: success }
      });
    },
    goback() {
      this.$router.back(-1);
    }
  }
};
</script>
<style lang="scss">

.Livesection {
  .el-form-item__content {
    width: 500px;
  }
}
.el-form-item__content {
  .is-disabled {
    .el-input__inner,.el-textarea__inner {
			background-color: #fff;
			color:#606266;
    }
  }
}
</style>